<!doctype html>
<html lang="en">
    <head>
        <title>jQuery Notebook Demo</title>
        <meta charset='utf-8'>
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" type="text/css" href="src/js/jquery.notebook.css">
        <link rel="stylesheet" type="text/css" href="css/default.css" />
        <link rel="stylesheet" type="text/css" href="css/component.css" />
        <script src="js/modernizr.custom.js"></script>
        <style type="text/css">
            .top{
                height:300px;
                width: 60%;
                margin:0 auto ;
                
            }
            .top-touxiang{
                height:200px;
                width: 200px;
                background: url(touxiang.jpg) no-repeat;
                margin:20px auto;
                -webkit-border-radius:200px;
                -moz-border-radius:200px;
                border-radius:200px;
               
            }
            .top-formation{
                height:20%;
                width: 30%;
                margin :0 auto;
                text-align: center;
                font-size: 16px;
                color: #333;
               
            }
            .zhanghu{
                position:absolute;
                height:40%;
                width: 15%;
                margin-top: 0%;     
                z-index: 1000;
                margin-left: 3%;
            }
        </style>
    </head>
    <body>
         <div class="zhanghu">
        <div class="container"> 
        
            <nav class="dr-menu">
                <div class="dr-trigger"><span class="dr-icon dr-icon-menu"></span><a class="dr-label">帐户</a></div>
                <ul>
                    <li><a class="dr-icon dr-icon-user" href="#">章天锋</a></li>
                    <li><a class="dr-icon dr-icon-camera" href="#">视频</a></li>
                    <li><a class="dr-icon dr-icon-heart" href="#">收藏夹</a></li>
                    <li><a class="dr-icon dr-icon-bullhorn" href="#">订阅</a></li>
                    <li><a class="dr-icon dr-icon-download" href="#">下载</a></li>
                    <li><a class="dr-icon dr-icon-settings" href="#">设置</a></li>
                    <li><a class="dr-icon dr-icon-switch" href="#">退出</a></li>
                </ul>
            </nav>
        
        </div><!-- /container -->
    </div>
    <div class="top">
        <div class="top-touxiang">

        </div>
        <div class="top-formation">
            Mr.zhang~~<br>
            1995.02.13
        </div>
    </div>
    <div class="editor">
           
    </div>
   
        <script type="text/javascript" src="src/js/libs/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="src/js/jquery.notebook.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('.editor').notebook({
                    autoFocus: true,
                    placeholder: 'Write down what you want'
                });
            });
        </script>
        <script src="js/ytmenu.js"></script>
    </body>
</html>